<template>
  <div class="app-container">
    <Pagetitle
      :title="pageTitle.title"
      :name="pageTitle.name"
      :btnName="pageTitle.btnName"
      @btnFun="btnFun"
    ></Pagetitle>
    <div class="filter-container">

    </div>
    <div class="table-container min-height brand-tabs">
      <Tabs>
        <TabPane
          label="全部"
          name="0"
        >
          <div class="brand-box">
            <template v-for="item in brandList">
              <div>
                <BrandItem :brandItem="item"></BrandItem>
              </div>
            </template>
          </div>
        </TabPane>
        <TabPane
          v-for="name in classList"
          :label="name.className"
          :key="name.classId"
          :name="name.className"
        >
          <div class="brand-box">
            <template v-for="item in brandList">
              <div v-if="name.classId === item.classId">
                <BrandItem :brandItem="item"></BrandItem>
              </div>
            </template>
          </div>
        </TabPane>
      </Tabs>
    </div>
    <Modal
      v-model="addBrandModal"
      :closable="false"
      :footer-hide="true"
    >
      <div class="modal-content">
        <Form
          ref="addBrandFrom"
          :model="addBrandFrom"
          :rules="ruleValidate"
          :label-width="80"
        >
          <div class="modal-header">
            <span>新增品牌</span>
            <a @click="closeModal('addBrandFrom')">
              <svg-icon icon-class="close" />
            </a>
          </div>
          <div class="modal-body">
            <FormItem
              label="品牌名"
              prop="brandName"
            >
              <Input
                v-model="addBrandFrom.brandName"
                placeholder="输入品牌名称"
              ></Input>
            </FormItem>
            <FormItem
              label="组别"
              prop="classId"
            >
              <Select v-model="addBrandFrom.classId">
                <Option
                  v-for="item in classList"
                  :value="item.classId"
                  :key="item.classId"
                  :label="item.className"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="LOGO">
              <Upload
                ref="upload"
                :format="['jpg','jpeg','png']"
                :action="uploadUrl"
                :on-success="handleSuccess"
                :max-size="51200"
                name="files"
              >
                <Button type="text">上传文件</Button>
              </Upload>
            </FormItem>
          </div>
          <div class="modal-footer">
            <Button @click="closeModal('addBrandFrom')">取消</Button>
            <Button
              type="primary"
              @click="handleSubmitAddBrand('addBrandFrom')"
            >确定</Button>
          </div>
        </Form>
      </div>
    </Modal>

    <Modal
      v-model="editorBrandModal"
      :closable="false"
      :footer-hide="true"
    >
      <div class="modal-content">
        <Form
          ref="editorBrandFrom"
          :model="editorBrandFrom"
          :rules="ruleValidate"
          :label-width="80"
        >
          <div class="modal-header">
            <span>修改品牌</span>
            <a @click="closeModal('editorBrandFrom')">
              <svg-icon icon-class="close" />
            </a>
          </div>
          <div class="modal-body">
            <FormItem
              label="品牌名"
              prop="brandName"
            >
              <Input
                v-model="editorBrandFrom.brandName"
                placeholder="输入品牌名称"
              ></Input>
            </FormItem>
            <FormItem
              label="组别"
              prop="classId"
            >
              <Select v-model="editorBrandFrom.classId">
                <Option
                  v-for="item in classList"
                  :value="item.classId"
                  :key="item.classId"
                  :label="item.className"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="LOGO">
              <Upload
                ref="upload"
                :format="['jpg','jpeg','png']"
                :action="uploadUrl"
                :on-success="handleSuccess"
                :max-size="51200"
                name="files"
              >
                <Button type="text">上传文件</Button>
              </Upload>
            </FormItem>
          </div>
          <div class="modal-footer">
            <Button @click="closeModal('editorBrandFrom')">取消</Button>
            <Button
              type="primary"
              @click="handleSubmitAddBrand('editorBrandFrom')"
            >确定</Button>
          </div>
        </Form>
      </div>
    </Modal>

  </div>
</template>
<script>
import {
  fetchBrandBrandList,
  fetchBrandClassList,
  fetchBrandAddBrand,
  fetchBrandUpdateBrand
} from "@/api/table";
import { Pagetitle, BrandItem } from "@/components";
export default {
  data() {
    return {
      pageTitle: {
        title: "品牌管理",
        name: "新增品牌",
        btnName: "btnFun"
      },
      brandList: [],
      classList: [],
      addBrandModal: false,
      editorBrandModal: false,
      addBrandFrom: {
        brandName: "",
        logoUrl: "",
        classId: ""
      },
      editorBrandFrom: {
        brandName: "",
        logoUrl: "",
        classId: ""
      },
      ruleValidate: {
        brandName: [
          {
            required: true,
            message: "填写姓名",
            trigger: "blur"
          }
        ],
        classId: [
          {
            required: true,
            message: "选择组别",
            trigger: "change",
            type: "number"
          }
        ]
      },
      //上传图片
      uploadList: []
    };
  },
  components: {
    Pagetitle,
    BrandItem
  },
  mounted() {
    this.getBrandBrandList();
  },
  methods: {
    btnFun() {
      this.addBrandModal = true;
    },
    async getBrandBrandList() {
      const tab = await fetchBrandClassList();
      const res = await fetchBrandBrandList();
      this.brandList = [];
      this.classList = [];
      res.data.forEach(item => {
        const data = {};
        data.className = item.className;
        data.brandName = item.brandName;
        data.brandId = item.brandId;
        data.classId = item.classId;
        data.logoUrl = item.logoUrl;
        this.brandList.push(data);
      });
      tab.data.forEach(item => {
        const data = {};
        data.className = item.className;
        data.classId = item.id;
        this.classList.push(data);
      });
    },
    async brandAddBrand(name) {
      await fetchBrandAddBrand({
        brandName: this.addBrandFrom.brandName,
        logoUrl: this.addBrandFrom.logoUrl,
        classId: this.addBrandFrom.classId
      });
      this.closeModal(name);
      this.$Message.success("添加成功");
    },
    resetForm(name) {
      this.$refs[name].resetFields();
    },
    closeModal(name) {
      this.resetForm(name);
      this.addBrandModal = false;
      this.editorBrandModal = false;
    },
    handleSubmitAddBrand(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.brandAddBrand(name);
        }
      });
    },
    showEditorBandModal(info) {
      this.editorBrandFrom.brandName = info.brandName;
      this.editorBrandFrom.logoUrl = info.logoUrl;
      this.editorBrandFrom.classId = info.classId;
      this.editorBrandModal = true;
    },
    //上传图片
    handleSuccess(file, fileList) {
      this.addBrandFrom.logoUrl = file.data[0];
      this.editorBrandFrom.logoUrl = file.data[0];
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    }
  },
  computed: {
    uploadUrl: () => {
      return process.env.BASE_URL + "file/upload";
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/styles/mixin";

.min-height {
  min-height: calc(78vh);
}
.brand-box {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 0px 20px 20px;
}
.table-container {
  padding: 0px 0px 0px 0px;
}
.m-bottom {
  margin-bottom: 30px;
}
.brand-tabs {
  padding-top: 10px;
}
</style>